<template>
    <a-layout id="components-layout-top" class="layout">
        <Header></Header>
        <a-layout-content style="background: #fff">
            <a-carousel autoplay>
                <div><h3>banner1</h3></div>
                <div><h3>banner2</h3></div>
                <div><h3>banner3</h3></div>
                <div><h3>banner4</h3></div>
            </a-carousel>
            <div class="inner-wrp">
                <div class="gutter-example">
                    <a-row :gutter="16">
                        <a-col class="gutter-row" :span="12">
                            <div class="gutter-box"></div>
                        </a-col>
                        <a-col class="gutter-row" :span="12">
                            <div class="gutter-box"></div>
                        </a-col>
                    </a-row>
                </div>
            </div>
        </a-layout-content>
        <Footer></Footer>
    </a-layout>
</template>

<script>
    import Header from '../components/include/header.vue'
    import Footer from '../components/include/footer.vue'
    export default {
        name: 'main',
        components: {
            Header,
            Footer
        }
    }
</script>
<style scoped>


    /* For demo */
    .ant-carousel >>> .slick-slide {
        text-align: center;
        height: 500px;
        line-height: 500px;
        background: #ccc;
        overflow: hidden;
    }

    .ant-carousel > > > .slick-slide h3 {
        color: #fff;
    }

    .gutter-example {
        margin-top: 30px;
    }

    .gutter-example >>> .ant-row > div {
        background: transparent;
        border: 0;
    }

    .gutter-box {
        background: #ccc;
        padding: 5px 0;
        height: 300px;
    }
</style>